<template>
  <div class="record-steps">
    <a-descriptions v-if="title" style="margin-top: 20px">
      <div class="record-steps__title" slot="title">
        <span>{{ title }}</span>
        <a-button class="btn--collapse" type="link" @click="handleCollapse">{{ collapseCheck ? $t('all.autotext760.2') : $t('all.autotext760.1') }}</a-button>
      </div>
    </a-descriptions>
    <div
      class="record-steps__item"
      :style="{ display: collapseCheck ? 'none' : 'flex'}"
      v-for="item in data"
      :key="item.id"
    >
      <div class="record-steps__label">
        <span>{{ item.date }}</span>
        <span>{{ item.dateTime }}</span>
      </div>
      <div class="record-steps__container">
        <div class="record-steps__tail"></div>
        <div class="record-steps__icon">
          <span
            class="dot-icon"
            :style="{ backgroundColor: iconColor, color: iconColor }"
          >
          </span>
        </div>
        <div class="record-steps__content">
          <span class="title">
            {{ item.title }}
          </span>
          <span class="sub-title" v-if="item.subtitle">{{ item.subtitle }}</span>
          <div class="description">
            <span class="description-item" v-for="(desc, index) in item.description" :key="index">
              {{ desc.label }}：
              <span :style="desc.style">{{ desc.value }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'record-steps',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    iconColor: {
      type: String,
      default: '#1890ff'
    },
    title: {
      type: String,
      default: ''
    },
    defaultCollapse: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      collapseCheck: this.defaultCollapse
    }
  },
  methods: {
    handleCollapse () {
      this.collapseCheck = !this.collapseCheck
    }
  }
}
</script>

<style scoped lang='less'>
.record-steps {
  .record-steps__title {
    .btn--collapse {
      float: right;
    }
  }
  .record-steps__item {
    display: flex;
    position: relative;
    &:last-of-type {
      .record-steps__container {
        .record-steps__tail {
          display: none;
        }
      }
    }
  }
  .record-steps__label {
    flex-basis: 160px;
    color: #687991;
    text-align: center;
    position: relative;
    top: -14px;
    > span {
      display: block;
    }
  }
  .record-steps__container {
    flex: 1;
    min-height: 100px;
    .record-steps__tail {
      width: 1px;
      height: 100%;
      padding-top: 16px;
      position: absolute;
      &::after {
        display: inline-block;
        content: '';
        width: 1px;
        height: 100%;
        background-color: #e8e8e8;
      }
    }
    .record-steps__icon {
      float: left;
      .dot-icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        transform: translateX(-50%);
      }
    }
    .record-steps__content {
      padding-left: 20px;
      height: 100%;
      .title,.sub-title {
        display: inline-block;
      }
      .title {
        font-weight: 500;
        margin-right: 20px;
        margin-bottom: 10px;
      }
      .description {
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr 1fr;
        grid-auto-rows: 25px;
        .description-item {
          color: #687991;
        }
      }
    }

  }
}
</style>
